<template>
  <div>
    <div class="relative" v-for="item in list">
      <img class="w-36 h-36" :src="item" alt="" />
      <!-- <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(item)"
        >
          <el-icon><zoom-in /></el-icon>
        </span> -->
      <!-- <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <el-icon><Download /></el-icon>
          </span> -->
      <span
        class="absolute bottom-0 left-0 right-0 flex items-center justify-center h-8 bg-gray-500 cursor-pointer bg-opacity-30"
        @click="handleRemove(item)"
      >
        <el-icon color="white"><Delete /></el-icon>
      </span>
    </div>
  </div>
  <el-upload
    :action="uploadUrl"
    list-type="picture-card"
    :auto-upload="true"
    :data="data"
    :headers="headers"
    :show-file-list="false"
    v-if="!limit || imgUrl.length < limit"
    :on-success="handleSuccess"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>

<script setup lang="ts">
import { getToken } from "@/utils/store";
import { Delete, Download, Plus, ZoomIn } from "@element-plus/icons-vue";
import { linkEmits, type UploadFile } from "element-plus";
import { computed, ref } from "vue";
const uploadUrl = import.meta.env.SYSTEM_BASE_API + "//file/img/plat";
const data = {
  path: "image",
  isCompress: 1,
};
const headers = {
  Authorization: getToken(),
};
const props = withDefaults(
  defineProps<{
    imgUrl: string;
    imgList: string[] | null;
    limit: number;
  }>(),
  {
    limit: 1,
    imgUrl: "",
    imgList: null,
  }
);
const list = computed(() => {
  if (props.limit <= 1) {
    if (props.imgUrl) {
      return [props.imgUrl];
    } else {
      return [];
    }
  } else {
    return props.imgList;
  }
});
const emits = defineEmits<{
  (event: "update:imgUrl", value: string): void;
}>();
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);

const handleRemove = (item: string) => {
  console.log(item);
  emits("update:imgUrl", '');
};
const handleSuccess = (res: any) => {
  console.log(res);
  emits("update:imgUrl", res.data);
};
const handlePictureCardPreview = (img: string) => {
  dialogImageUrl.value = img;
  dialogVisible.value = true;
};

// const handleDownload = (file: UploadFile) => {
//   console.log(file);
// };
</script>

<style scoped></style>
